<!--
 * @Description: 用户
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:27
 * @LastEditTime: 2021-08-31 11:23:37
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\userPopup.vue
-->
<template>
  <div class="page-container">
    <div class="page-left">
      <div class="padding-xs">
        <a-select
          v-model="dbConnectionUuid"
          placeholder="请选择数据库"
          style="width: 100%"
          allowClear
          @change="getDatabaseTable"
        >
          <a-select-option v-for="item in databaseData" :key="item.uuid">{{
            item.name
          }}</a-select-option>
        </a-select>
      </div>
      <div class="classify-container">
        <TableClassify
          :treeData="databaseTableData"
          @select="selectTable"
          :replaceFields="{ title: 'tableName', key: 'tableName' }"
          searchPlaceholder="名称"
          searchFieldName="tableName"
          :loading="databaseTableLoading"
          :showHeader="false"
        ></TableClassify>
      </div>
    </div>
    <div class="page-right">
      <div class="page-right-top">
        <span class="page-text">SQL表达式</span>
        <div class="monaco-container">
          <Monaco
            ref="monaco"
            :data="sqlData"
            width="100%"
            language="sql"
            :opts="{ theme: 'vs' }"
            height="100%"
          ></Monaco>
        </div>
      </div>
      <div class="page-right-bottom">
        <span class="page-text">查询参数</span>
        <div class="margin-top-xs table-box">
          <div class="">
            <a-button type="primary" @click="handleAdd">新增参数</a-button>
          </div>
          <div class="margin-top-xs table-container">
            <a-table
              :columns="columns"
              :data-source="sqlParamsData"
              :pagination="false"
              size="small"
              rowKey="id"
            >
              <template slot="renderAction" slot-scope="text, record, index">
                <a @click="handleEdit(record)">编辑</a>
                <span class="action-margin"></span>
                <a-popconfirm
                  title="确定删除吗？"
                  @confirm="() => handleDel(index)"
                >
                  <a class="action-delete">{{ $ct("delete", "删除") }}</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </div>
    <sqlParamsEdit
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="sqlParamsMdl"
      @cancel="handleCancel()"
      @ok="handleOk()"
    >
    </sqlParamsEdit>
  </div>
</template>

<script>
import { DataGrid, TableClassify } from "@/components";
import { Monaco } from "@/components";
import sqlParamsEdit from "./sqlParamsEdit";

export default {
  components: {
    DataGrid,
    Monaco,
    sqlParamsEdit,
    TableClassify,
  },
  props: {},
  data() {
    return {
      // 查询参数
      columns: [
        {
          title: "参数名",
          align: "center",
          width: 120,
          dataIndex: "paramsName",
        },
        {
          title: "数据类型",
          align: "center",
          dataIndex: "type",
        },
        {
          title: "默认值",
          align: "center",
          dataIndex: "paramsValue",
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "action",
          scopedSlots: { customRender: "renderAction" },
        },
      ],
      url: {
        getDatabase: "/system/sysDatabaseConnection/getPageSet",
        getDatabaseTable: "/system/sysDatabaseConnection/getTable",
      },
      masterRows: null,
      dbConnectionUuid: "",
      databaseData: [],
      sqlData: "",
      sqlParamsData: [], //sql参数表格数据
      visible: false,
      confirmLoading: false,
      sqlParamsMdl: {},
      tableDataKey: 1,
      classificationName: "",
      masterConfirmLoading: false,
      databaseTableData: [],
      databaseTableLoading: false,
      model: {},
    };
  },
  computed: {},
  created() {
    this.getDatabase();
  },
  watch: {
    model: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && JSON.stringify(newVal) !== "{}") {
          if (newVal.interfaceSqlStatement)
            this.$refs.monaco.setValue(
              JSON.parse(newVal.interfaceSqlStatement)
            );
          if (newVal.sqlParameters)
            this.sqlParamsData = JSON.parse(newVal.sqlParameters);
          this.dbConnectionUuid = newVal.dbConnectionUuid;
        }
      },
    },
  },
  methods: {
    //选择表
    selectTable(e) {
      console.log("e------>", e);
    },
    //选择数据库 获取数据表
    getDatabaseTable(e) {
      this.databaseTableLoading = true;
      this.databaseTableData = [];
      if (!e) {
        this.databaseTableLoading = false;
        return;
      }
      this.$post(this.url.getDatabaseTable, { uuid: e }).then((res) => {
        this.databaseTableLoading = false;
        this.databaseTableData = res;
      });
    },
    getDatabase() {
      this.$post(this.url.getDatabase).then((res) => {
        if (res) {
          this.databaseData = res.rows;
          this.dbConnectionUuid = this.dbConnectionUuid
            ? this.dbConnectionUuid
            : this.databaseData[0].uuid;
          this.getDatabaseTable(this.dbConnectionUuid);
        }
      });
    },
    masterRowClick(record, index, param) {},
    //新增处理
    handleAdd() {
      this.sqlParamsMdl = {};
      this.visible = true;
      this.$refs.createModal.title = "新增";
      this.$refs.createModal.add();
    },
    //编辑处理
    handleEdit(record) {
      this.sqlParamsMdl = record;
      this.visible = true;
    },
    //删除处理
    handleDel(index) {
      this.sqlParamsData.splice(index, 1);
    },
    //表单确定
    handleOk() {
      // 拿到表单数据
      this.$refs.createModal.form.validateFields((err, values) => {
        if (!err) {
          //  判断是新增还是编辑
          if (values.id) {
            //  编辑
            this.sqlParamsData.forEach((item, index) => {
              if (item.id == values.id) {
                this.sqlParamsData.splice(index, 1, values);
              }
            });
            this.visible = false;
          } else {
            //  新增
            values.id = this.tableDataKey;
            this.tableDataKey++;
            this.sqlParamsData.push(values);
            this.visible = false;
          }
        }
      });
    },
    //表单取消
    handleCancel() {
      this.visible = false;
      this.$refs.createModal.title = "编辑";
    },
    getData() {
      return this.$refs.monaco.getValue();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .advanced-table {
  height: 100% !important;
}

.page-container {
  height: calc(100vh - 76px);
  display: flex;
  overflow: scroll;
  display: flex;
  /*padding: 10px;*/
  margin: 10px;
  .page-left {
    height: 100%;
    background-color: #fff;
    width: 15%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    .classify-container {
      flex: 1;
      overflow: auto;
    }
  }
  .page-right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .page-right-top {
      flex: 1;
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      padding: 10px;
      background-color: #fff;
      .monaco-container {
        flex: 1;
      }
    }
    .page-right-bottom {
      flex: 1;
      width: 100%;
      padding: 10px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .table-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .table-container {
          flex: 1;
          overflow: auto;
        }
      }
    }
  }
  .page-text {
    font-weight: 600;
    font-size: 18px;
    /*padding-left: 55px;*/
  }
}
/deep/ .ant-spin-nested-loading {
  height: 100% !important;
}
</style>
